import React from "react";
import { connect } from "react-redux";
import "./index.scss";
import { withRouter } from "react-router";
import Top from "../../views/Top/top";
import { Space } from 'antd';
import {
    SethistoryActive,
    SetHistoryListActiveItem,
    SethistroyList, SetLastActiveAudio,
    SetLyricsShow,
    SetPlayAudioType
} from "../../store/action";
import { Scrollbars } from 'react-custom-scrollbars';
import classnames from 'classnames';
import emitter from "../../event";
import { GetSongsComment } from "../../api/ScreenLyrics/ScreenLyrics";
import { Avatar, Divider } from 'antd';
import { fitterTime } from "../../util/timerfilter";

const mapStateToProps = (state) => {
    return {
        state,
    };
}

let lyricInstance;

const mapDispatchToProps = (dispatch) => {
    return {
        setlyrics: (form) => dispatch(SetLyricsShow(form)),
        sethistory: (list) => dispatch(SethistroyList(list)),
        sethistoryactive: (id) => dispatch(SethistoryActive(id)),
        setHistoryActiveItem: (info) => dispatch(SetHistoryListActiveItem(info)),
        setPlayType: (type) => dispatch(SetPlayAudioType(type)),
        setLastAudioActive: (list) => dispatch(SetLastActiveAudio(list)),
    }
}


let timer;
class ScreenLyricsPage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isScroll: false,
            CurrentPage: {
                page: 1,
                pageSize: 20,
            },
            total: 0,
            hotComments: [],
            comments: [],
            isNoTop: false,
        };
        this.isPlay = this.isPlay.bind(this);
        this.scrollStart = this.scrollStart.bind(this);
        this.ScrollEnd = this.ScrollEnd.bind(this);
        this.GetComment = this.GetComment.bind(this);
        this.ScrollIndex = this.ScrollIndex.bind(this);
    }

    componentWillUnmount(){
        console.log('触发关闭');
        emitter.removeListener(this.eventEmitter,function (){});
        clearTimeout(timer);
    }


    componentDidMount() {
        this.props.onRef(this);
        this.GetComment();
        this.eventEmitter = emitter.addListener('ChangeLyrics', () => {
            const { isScroll } = this.state;
            if(!isScroll){
                let scrollbox = document.getElementById('Scrollbar_views');
                let activeitem = document.getElementsByClassName('lyricsitemactive')[0];
                if(scrollbox && activeitem){
                    if(activeitem.offsetTop - 205 > 0){
                        scrollbox.scrollTo({
                            top: activeitem.offsetTop - 205,
                            behavior: "smooth"
                        })
                    }else {
                        scrollbox.scrollTo({
                            top: 0,
                            behavior: "smooth"
                        })
                    }
                }
            }
        });

    }

    GetComment(){
        // 获取评论列表
        const { historyListActive } = this.props.state;
        this.setState({
            CurrentPage: {
                page: 1,
                pageSize: 20,
            },
        })
        let Commentform = {
            offset: 0,
            limit: 20,
            id: historyListActive,
        };
        GetSongsComment(Commentform).then(res => {
            const { code } = res;
            if(code == 200 ){
                const { hotComments, comments, total } = res;
                this.setState({
                    hotComments,
                    comments,
                    total,
                });
            }else {

            }
        }).catch(() => {

        })

    }


    isPlay(){
        const { AudioIsPlay } = this.props.state;
        return AudioIsPlay;
    }

    createLyricsList(){
        const { LyricsList, AudioLyricsLine } = this.props.state;
        let lyricsShowText = [];
        let linesList = LyricsList.lines;
        linesList.map((r,index) => {
            lyricsShowText.push(
                <p className={classnames('lyricsitem',{'lyricsitemactive': AudioLyricsLine === index})} key={index} >
                    <span>{ r.txt }</span>
                </p>
            )
        });

        return lyricsShowText;
    }

    scrollStart(){
        clearTimeout(timer);
        this.setState({
            isScroll: true,
        })
    }

    ScrollEnd(){
        timer = setTimeout(() => {
            this.setState({
                isScroll: false,
            })
        }, 2000)
    }

    CreateCommentItem(r,index){
        return <div key={index} className="CommentItems">
            <div className="user_avatar">
                <Avatar src={r.user.avatarUrl}></Avatar>
            </div>
            <div className="Items_box">
                <div className="comment_box">
                    <span className="user_name">{r.user.nickname} : </span>
                    <span className="comment_text">{r.content}</span>
                </div>
                <div className="comment_info">
                    <span className="time">{fitterTime(r.time)}</span>
                </div>
            </div>
        </div>
    }

    ScrollIndex(event){
        let scrollTop = event.target.scrollTop
        this.setState({
            isNoTop: scrollTop > 10,
        })

    }

    render() {
        const { total, hotComments, comments, isNoTop } = this.state;
        const { historyActiveItem } = this.props.state;
        let artistsList = [];
        historyActiveItem.ar.map((item,key) => {
            artistsList.push(
                <span key={key} artistid={item.id} className="Artists-Name">{item.name}</span>
            )
        })
        const hotCommentList = [];
        const commentsList = []
        if(hotComments.length > 0){
            hotComments.map((r,index) =>{
                hotCommentList.push(this.CreateCommentItem(r,index))
            })
        }
        if(comments.length > 0){
            comments.map((r,index) =>{
                commentsList.push(this.CreateCommentItem(r,index))
            })
        }
        return(
            <div className="ScreenLyricsPage bg-pan-top">
                <div className="ScreenLyrics_title">
                    <Top isScreen={true} isNoTop={isNoTop} />
                </div>
                <Scrollbars autoHide onScroll={this.ScrollIndex}>
                    <div className="ScreenLyrics_Content">
                        <div className="Content_center">
                            <div className="Center_title">
                                <span className="song_name">{historyActiveItem.name}</span>
                                <Space className="song_ar_al_box">
                                    <div className="song_ar">
                                        {artistsList}
                                    </div>
                                    -
                                    <div className="song_al">
                                        <span className="sl_name">{historyActiveItem.al.name}</span>
                                    </div>
                                </Space>
                            </div>
                            <div className="Center_lyrics_box">
                                <div className="animate_lyrics">
                                    <div className={classnames('image_round',{'rotate-center': this.isPlay()})}>
                                        <div className="round_lines">
                                            <div className="lines1">
                                                <div className="lines2">
                                                    <div className="lines3">
                                                        <div className="lines4">
                                                            <div className="song_img">
                                                                <img src={historyActiveItem?historyActiveItem.al.picUrl:''} alt=""/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div className="lyrics_list">
                                    <Scrollbars
                                        onScrollStart={this.scrollStart}
                                        onScrollStop={this.ScrollEnd}
                                        renderView={props => <div {...props} id="Scrollbar_views" className="Scrollbar_views"/>}
                                    >
                                        {this.createLyricsList()}
                                    </Scrollbars>

                                </div>
                            </div>
                            {/*评论*/}
                            <div className="Screen_Comment">
                                <div className="Hot_Comment">
                                    <div className="title">最热评论({total})</div>
                                    <div className="Comment_list">
                                        {hotCommentList}
                                    </div>
                                </div>
                                <div className="New_Comment">
                                    <div className="title">最新评论({total})</div>
                                    <div className="Comment_list">
                                        {commentsList}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Scrollbars>
            </div>

        )
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(withRouter(ScreenLyricsPage));
